<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import router from '../router/router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
const user = ref({})
const loginform = ref(null)
const store = useStore()
// 定义校验规则
const rules = reactive({
  username: [{
    required: true, message: '用户名不能为空', trigger: 'blur'
  }],
  password: [{
    required: true, message: '密码不能为空', trigger: 'blur'

  }]
})

const login = () => {
  // 进行提交前的校验
  loginform.value.validate((valid) => {
    if (valid) {
      axios.get('api/mycontroller2/mymethod2/' + user.value.username + '/' + user.value.password).then((res) => {
        console.log(res.data)
        if (res.data.id === 0) {
          ElMessage.error('登录失败')
        } else {
          ElMessage.success('登录成功')
          router.push('homeview')
          store.dispatch('userStore/saveUserInfoAction', res)
        }
      })
    } else { return false }
  })
}
</script>

<template>
<div class="login-content">
  <div class="modal">
    <el-form :model="user" :rules="rules" status-icon ref="loginform">
      <div class="login-title">登录</div>
      <el-form-item prop="username">
        <el-input type="text" prefix-icon="avatar" v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" prefix-icon="view" v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item class="login-button" >
        <el-button type="primary" @click="login" >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<style scoped>
.login-content{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(204, 209, 213);
  width: 100vw;
  height: 100vh;
}

.login-content .modal{
  width:350px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 0px 10px red;
  padding: 50px;
}
.login-content .login-title{
  font-size: 25px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 15px;
}
.login-button{
  margin-top: 20px;
}
</style>
